<template>
	<view>
		<pageheader :setting="settingdata"></pageheader>
		<view class="logobox">
			<u-toast ref="uToast"></u-toast>
			<image :src="avatar" mode="aspectFill"></image>
			<text class="name">头像/LOGO</text>
			<text class="change" @click="chooseAvatar">点击更换</text>
		</view>
		<view class="basicinfo">
			<text class="title">基础信息</text>
			<view class="infoline">
				<text class="infoname">苗店名称/昵称</text>
				<u-input type="text" v-model="shop.shop_name" :border="false" placeholder="请输入苗店名称/昵称"
					placeholderStyle="color:#B9B9B9" input-align="right" class="lineputs" :clearable="false" />
			</view>
			<view class="infoline">
				<text class="infoname">微信号</text>
				<u-input type="text" v-model="shop.wechat" :border="false" placeholder="请输入微信号"
					placeholderStyle="color:#B9B9B9" input-align="right" class="lineputs" :clearable="false" />
			</view>
			<view class="infoline">
				<text class="infoname">手机号</text>
				<view @click='editphone'>查看 <text class="iconfont icon-xwtubiaoku-03"></text></view>
				<!--  <u-input value="18382449100" type="number" v-model="shop.mobile" :border="false" placeholder="请输入手机号" placeholderStyle="color:#B9B9B9"
          input-align="right" class="lineputs" :clearable="false" /> -->
			</view>
			<view class="infoline">
				<text class="infoname">邮箱</text>
				<u-input type="text" v-model="shop.email" :border="false" placeholder="请输入邮箱"
					placeholderStyle="color:#B9B9B9" input-align="right" class="lineputs" :clearable="false" />
			</view>
			<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"
				themeColor="#007AFF"></simple-address>
			<view class="infoline">
				<text class="infoname">地区</text>
				<view @tap="openAddres">
					<view class="uni-input" v-if="array[0].length<1">请选择地址</view>
					<view class="uni-input" v-else>{{array[0]}} {{array[1]}} {{array[2]}}</view>
				</view>
			</view>
			<!-- <view class="infoline">
				<text class="infoname">详细地址</text>
				<u-input v-model="shop.address" type="text" :border="false" placeholder="请输入详细地址"
					placeholderStyle="color:#B9B9B9" input-align="right" class="lineputs" :clearable="false" />
			</view> -->
			<view class="justone" style="padding: 0;">
				<view class="littletitle" style="justify-content: space-between;">
					<view class="infoname">详细地址</view>
					<view class="" @click="chosemap">
						地图选点: <u-icon name="map" color="#b2b2b2" size="28"></u-icon>
						<!-- <text class="icons icon-daohang" @click="chosemap" style="font-size: 38rpx;"></text> -->
					</view>
				</view>
				<u-input v-model="shop.address" type="textarea" :border="false" placeholder="请输入详细地址"
					placeholderStyle="color:#B9B9B9" class="textarea_inputs" :clearable="false" />
			</view>

			<view class="infoline" style="border: none;">
				<text class="infoname">门店</text>
				<u-input type="text" v-model="shop.companyname" :border="false" placeholder="请输入门店"
					placeholderStyle="color:#B9B9B9" input-align="right" class="lineputs" :clearable="false" />
			</view>

			<view class="infoline" style="border: none;">
				<text class="infoname">开始营业时间</text>
				<picker @change="setstar" mode="time">
					<view class="uni-input" v-if="starttime">{{starttime}}</view>
					<view class="uni-input input-placeholder" v-else>点击选择</view>
				</picker>
			</view>
			<view class="infoline" style="border: none;">
				<text class="infoname">结束营业时间</text>
				<picker @change="setend" mode="time">
					<view class="uni-input" v-if="endtime">{{endtime}}</view>
					<view class="uni-input input-placeholder" v-else>点击选择</view>
				</picker>
			</view>
		</view>
		<view class="basicinfo haspadding" style="border: none;">
			<text class="title">苗店实力</text>
			<view class="justone">
				<text class="littletitle">实力简介</text>
				<u-input type="textarea" :border="false" v-model="shop.describe"
					placeholder="请补充完善苗店信息,从种植面积、从业年限为哪些大客户供货。苗店待色等等(255字内）" placeholderStyle="color:#B9B9B9"
					maxlength="255" class="textarea_inputs" :clearable="false" />
			</view>
			<view class="justone">
				<text class="littletitle">主营范围</text>
				<u-input type="textarea" v-model="shop.business" maxlength="200" :border="false"
					placeholder="请补充完善主营范围，例如：迎客松、三角枫等等(200字内）" placeholderStyle="color:#B9B9B9" class="textarea_inputs"
					:clearable="false" />
				<view class="upimgbox">
					<u-upload ref="upload" max-size="12328959" :action="action" width="210" height="210" max-count="9"
						:file-list="main" @on-remove="removeimg" @on-uploaded="uploaded"></u-upload>
				</view>
			</view>
			<view class="justone">
				<view class="littletitle">资质<text>请上传相关苗木行业资质证书</text></view>
				<view class="upimgbox">
					<u-upload ref="upload2" max-size="12328959" :action="action" width="210" height="210" max-count="9"
						:file-list="enterprise" @on-remove="removeimg2" @on-uploaded="uploaded2"></u-upload>
				</view>
			</view>
		</view>
		<view class="savebtn" @click="submit">保存</view>
	</view>
</template>

<script>
	var _this, shak;
	export default {
		data() {
			return {
				settingdata: {
					name: '苗店信息',
					bgColor: '#fff',
					titleColor: '#000000',
					showNav: true,
					showTypes: 0,
					position: "editstation"
				},
				shop: {
					shop_name: "",
					mobile: "",
					companyname: "",
					business: "",
					describe: "",
					wechat: "",
					email: "",
					address: "",
				},
				array: ["", "", ""],
				// 上传内容
				main: [],
				main_images: [],
				enterprise: [],
				enterprise_images: [],
				// 头像
				avatar: "",
				// 后台使用的头像
				image_path: "",
				// 图片上传请求路径
				action: "",
				cityPickerValueDefault: [0, 0, 1],
				starttime: "请选择", //开始营业时间
				endtime: "请选择",
			}
		},
		onLoad(e) {
			_this = this
			_this.action = _this.$api.getbase() + 'fileupload'
			_this.getdata()

			//裁剪头像
			uni.$on('uAvatarCropper', path => {
				uni.uploadFile({
					url: _this.action,
					filePath: path,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (res) => {
						let data = JSON.parse(res.data).data
						_this.avatar = data.fullurl
						_this.image_path = data.url
					}
				});
			})
		},
		methods: {
			// 获取数据
			getdata() {
				_this.$api.get("geteditinfo", {}).then(data => {
					_this.shop = data
					_this.avatar = data.image
					_this.image_path = data.image_path
					_this.array = [data.province, data.city, data.county]
					_this.main_images = data.main_images_path
					_this.enterprise_images = data.enterprise_images_path
					if (data.starttime != null) {
						_this.starttime = data.starttime
					}
					if (data.endtime != null) {
						_this.endtime = data.endtime
					}
					data.main_images.forEach(item => {
						_this.main.push({
							url: item
						})
					})
					data.enterprise_images.forEach(item => {
						_this.enterprise.push({
							url: item
						})
					})
				});
			},
			// 切换城市
			openAddres() {
				_this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				_this.array = e.label.split('-');
			},
			setstar(e) {
				_this.starttime = e.detail.value
			},
			setend(e) {
				_this.endtime = e.detail.value
			},
			// 删除图片
			removeimg(e) {
				_this.main_images.splice(e, 1)
			},
			// 删除图片
			removeimg2(e) {
				_this.enterprise_images.splice(e, 1)
			},
			// 上传成功
			uploaded(e) {
				_this.main_images = []
				e.forEach((item, index) => {
					if (item.response) {
						if (item.response.code == 1) {
							_this.main_images.push(item.response.data.url)
						} else {
							_this.$refs['upload'].remove(index)
						}
					}
				})
			},
			// 上传成功
			uploaded2(e) {
				_this.enterprise_images = []
				e.forEach((item, index) => {
					if (item.response) {
						if (item.response.code == 1) {
							_this.enterprise_images.push(item.response.data.url)

						} else {
							_this.$refs['upload2'].remove(index)
						}
					}
				})
			},
			chooseAvatar() {
				this.$u.route({
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},

			submit() {
				_this.click_shake(function() {
					let data = [{
							value: _this.shop.shop_name,
							type: 1,
							title: "请输入苗店名称"
						}, {
							value: _this.shop.mobile,
							type: 1,
							title: "请输入手机号"
						}, {
							value: _this.shop.mobile,
							type: 3,
							title: "手机号格式有误"
						}, {
							value: _this.array[0],
							type: 1,
							title: "请选择地址"
						}, {
							value: _this.shop.address,
							type: 1,
							title: "请输入详细地址"
						}, {
							value: _this.shop.companyname,
							type: 1,
							title: "请输入公司名称"
						}, {
							value: _this.shop.business,
							type: 1,
							title: "请输入主营业务"
						}, {
							value: _this.main_images.length,
							type: 2,
							title: "请上传主营范围"
						}
						// , {
						// 	value: _this.enterprise_images.length,
						// 	type: 2,
						// 	title: "请上传企业资质"
						// }

					]
					if (_this.shop.email != '') {
						if (!_this.$plug.checkEmail(_this.shop.email)) {
							uni.showToast({
								title: '邮箱格式错误',
								icon: 'none'
							});
							return;
						}
					}
					if (_this.starttime == '请选择' || _this.endtime == '请选择') {
						// _this.starttime == ""
						// _this.endtime == ""
						uni.showToast({
							title: "请选择店铺营业时间",
							icon: 'none',
						})
						return
					}
					if (_this.$plug.verify(data)) {
						_this.$api.post("editstore", {
							image: _this.image_path,
							shop_name: _this.shop.shop_name,
							mobile: _this.shop.mobile,
							province: _this.array[0],
							city: _this.array[1],
							county: _this.array[2],
							primaryid: _this.shop.id,
							companyname: _this.shop.companyname,
							business: _this.shop.business,
							describe: _this.shop.describe,
							main_images: _this.main_images.toString(),
							enterprise_images: _this.enterprise_images.toString(),
							wechat: _this.shop.wechat,
							email: _this.shop.email,
							address: _this.shop.address,
							starttime: _this.starttime,
							endtime: _this.endtime,
						}).then(data => {
							wx.showToast({
								title: "保存成功"
							})
							uni.setStorageSync("refresh", "1")
							setTimeout(function() {
								wx.navigateBack({
									delta: 1
								})
							}, 500);
						});
					}
				})
			},
			// 防抖点击
			click_shake(fn) {
				if (!_this.shake) {
					fn && typeof fn === 'function' && fn()
					_this.shake = true
					setTimeout(function() {
						_this.shake = false
					}, 500)
				}
			},
			editphone() {
				uni.navigateTo({
					url: "/home/oracle/bingdingphone"
				})
			},
			chosemap() {
				plus.geolocation.getCurrentPosition(function(p) {
					console.log(p)
					// _this.gaode = p.address.city + '----' + p.coords.latitude + '----' + p.coords.longitude
					// new amapFile.AMapWX({
					// 	key: "fad2d687dbc47bedc02aa3ce8f3d1542"
					// }).getRegeo({
					// 	success: function(data) {
					// 		// _this.gaode = JSON.stringify(data)
					// 		let address = data[0].regeocodeData.addressComponent
					// 		uni.setStorageSync("address", {
					// 			"city": address.city,
					// 			"long": address.streetNumber.location.split(',')[0],
					// 			"lat": address.streetNumber.location.split(',')[1]
					// 		})
					// 		_this.settingdata.city = address.city
					
					// 		// _this.getindex(address.city)
					// 		console.log(address)
					// 	},
					// 	fail: function(res) {
					// 		uni.showToast({
					// 			title: "定位失败:key:" + "fad2d687dbc47bedc02aa3ce8f3d1542",
					// 			icon: "none"
					// 		});
					// 		console.log(res)
					// 		//_this.openLocation()
					// 	}
					// })
					let keyword = "成都市锦江区";
					if(_this.array[0]){
						keyword = _this.array[0]+ _this.array[1]+ _this.array[2]
					}
					uni.chooseLocation({
						latitude:p.coords.latitude,
						longitude:p.coords.longitude,
						keyword: keyword,
						success: function(res) {
							console.log('位置名称：' + res.name);
							console.log('详细地址：' + res.address);
							console.log('纬度：' + res.latitude);
							console.log('经度：' + res.longitude);
							_this.shop.address = res.address
						}
					});
				
				}, function(e) {
					// _this.cuowu = JSON.stringify(e) + '报错'
				});

			},
		}
	}
</script>

<style lang="scss" scoped>
	.logobox {
		height: 308rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-bottom: 22rpx solid #F6F6F6;

		image {
			width: 114rpx;
			height: 114rpx;
			border-radius: 50%;
		}

		.name {
			margin-top: 14rpx;
			color: #000000;
			font-size: 28rpx;
			font-weight: bold;
		}

		.change {
			margin-top: 4rpx;
			color: #000000;
			font-size: 24rpx;
		}
	}
	
	.basicinfo {
		padding: 0 28rpx;
		border-bottom: 18rpx solid #f6f6f6;
		display: flex;
		flex-direction: column;

		.title {
			margin-top: 40rpx;
			color: #000000;
			font-size: 32rpx;
			font-weight: bold;
		}

		.justone {
			padding-bottom: 26rpx;
			border-bottom: 2rpx solid #f6f6f6;

			.littletitle {
				margin: 40rpx 0 30rpx 0;
				color: #000000;
				font-size: 28rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				text {
					margin-left: 24rpx;
					color: #b2b2b2;
					font-size: 24rpx;
				}
			}

			.textarea_inputs {
				width: 100%;
				font-size: 28rpx;
				color: #000000;
			}

			.upimgbox {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				.upbox {
					margin: 34rpx 34rpx 0 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 144rpx;
					height: 144rpx;
					border: 2rpx solid #dcdcdc;

					.iconfont {
						color: #cecdcd;
						font-size: 30rpx;
					}

					.number {
						margin-top: 10rpx;
						color: #b2b2b2;
						font-size: 24rpx;
					}
				}
			}
		}

		.infoline {
			padding: 20rpx 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #f6f6f6;

			.infoname {
				color: #000000;
				font-size: 28rpx;
			}

			.lineputs {
				color: #6b6b6b;
				font-size: 28rpx;
			}
		}
	}

	.haspadding {
		padding-bottom: 80rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 80rpx);
	}

	.savebtn {
		width: 100%;
		height: 80rpx;
		height: calc(env(safe-area-inset-bottom) + 80rpx);
		padding-bottom: env(safe-area-inset-bottom);
		background: #38bd8c;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		font-size: 28rpx;
		font-weight: bold;
		position: fixed;
		bottom: 0;
		z-index: 99;
	}
	
	.input-placeholder {
		color: #aaaaaa;
	}
</style>
